<!DOCTYPE>
<html>

<head>
  <meta charset="utf-8">
  <title>IFE JavaScript Task 30</title>
  <script src="js/task30.js"></script>
  <style>
  label {
    display: inline-block;
    width: 80px;
    text-align: right;
  }

  .msg {
    display: none;
  }
  </style>
</head>

<body>
  <fieldset>
    <legend><a href="http://ife.baidu.com/task/detail?taskId=30">说明</a></legend>
    <dl>
      <dt>任务目的</dt>
      <dd>加强对JavaScript的掌握</dd>
      <dd>熟悉常用表单处理逻辑</dd>
    </dl>
    <dl>
      <dt>任务目的</dt>
      <dd>如<a target="_blank" href="http://7xrp04.com1.z0.glb.clouddn.com/task_2_30_1.jpg">示例图</a>中所示，基于上一个任务（任务29），在页面中添加多个表单</dd>
      <dd>要求:</dd>
      <dd>表单获得焦点时，下方显示表单填写规则</dd>
      <dd>表单失去焦点时校验表单内容</dd>
      <dd>校验结果正确时，表单边框显示绿色，并在下方显示验证通过的描述文字</dd>
      <dd>校验结果错误时，表单边框显示红色，并在下方显示验证错误的描述文字</dd>
      <dd>点击提交按钮时，对页面中所有输入进行校验，校验结果显示方式同上。若所有表单校验通过，弹窗显示“提交成功”，否则显示“提交失败”</dd>
    </dl>
  </fieldset>
  <!-- <form action="#" style="margin-top:20px;"> -->
  <form id="box">
    <p style="margin-top:20px;">
      <label>名称</label>
      <input id="name" type="text" name="name">
    </p>
    <p id="nameMsg" class="msg">
      必填，长度为4~16个字符
    </p>
    <p style="margin-top:10px;">
      <label>密码</label>
      <input id="passw" type="password" name="passw">
    </p>
    <p id="passwMsg" class="msg">
      必填，长度为4~16个字符
    </p>
    <p style="margin-top:10px;">
      <label>密码确认</label>
      <input id="passwr" type="password" name="passwr">
    </p>
    <p id="passwrMsg" class="msg">
      再次输入相同密码
    </p>
    <p style="margin-top:10px;">
      <label>邮箱</label>
      <input id="mail" type="text" name="mail">
    </p>
    <p id="mailMsg" class="msg">
      请输入邮箱
    </p>
    <p style="margin-top:10px;">
      <label>手机</label>
      <input id="phone" type="text" name="phone">
    </p>
    <p id="phoneMsg" class="msg">
      请输入手机号码
    </p>
  <button id="yanz" type="button">提交</button>
  </form>
  <!-- </form> -->
</body>

</html>
